<template>
      <div>
        <div style="text-align: left;">
          <el-form :model="dataForm" ref="dataForm">
            <el-form-item label="图标" :label-width="formLabelWidth" prop="title">
               <el-upload
                :action="imgUpload"
                :file-list="singlList"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="singlSuccess"
                :on-remove="handleRemove"
                :limit="1">
                <i class="el-icon-plus"></i>
              </el-upload>

            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth" prop="jumpLink">
                <el-input v-model.trim="dataForm.jumpLink" size="mini" style="width:600px;">
                </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="productProduct">
            <el-button :size="size" type="primary" style="float: left;margin-bottom: 10px;" @click="showProductList">添加商品</el-button>
          </div>
          <div class="table-section">
            <el-table :data="productListData"
                      v-loading="productListloading"
                      :header-cell-style="tableHeaderColor"
                      ref="multipleTable"
                      style="width: 100%"
                      :row-class-name="tableRowClassName"
                      border
                      :size="size">
              <el-table-column prop="productId" label="ID" sortable  align="center"></el-table-column>
              <!-- <el-table-column prop="code" label="商品编码" sortable  align="center"></el-table-column> -->
              <el-table-column prop="chineseName" label="商品名称" align="center"></el-table-column>
              <!-- <el-table-column prop="name" label="商品品牌" align="center"></el-table-column> -->
              <!-- <el-table-column prop="fullNamePath" label="商品类目" align="center"></el-table-column> -->
              <el-table-column prop="salePriceWithTax" label="零售价（元）" align="center"></el-table-column>
            </el-table>
          </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close" size="mini">取消</el-button>
          <el-button type="primary" @click="saveModuleNameConf" size="mini">确定</el-button>
        </div>
        
        <el-dialog title="商品列表" :visible.sync="productListTemplateVisible" width="60%" :close-on-click-modal="false" :show-close="false">
          <el-form :inline="true" class="demo-form-inline2" size="small" v-model="productForm">
              <el-row>
                  <el-form-item label="商品名称">
                      <el-input v-model="productForm.chineseName" placeholder="商品名称"></el-input>
                  </el-form-item>
                  <el-form-item label="商品编码">
                      <el-input v-model="productForm.code" placeholder="商品编码"></el-input>
                  </el-form-item>
              </el-row>
              <el-row>
                  <el-form-item>
                      <el-button type="primary" icon="el-icon-search" @click="queryPageProductManagement">搜索</el-button>
                      <!-- <el-button icon="el-icon-refresh-left" @click="restForm">清空</el-button> -->
                  </el-form-item>
              </el-row>
          </el-form>
          <div class="table-section" style="height: 500px;">
              <el-table :data="productTemplateList" 
                  v-loading="productListloading"
                  :header-cell-style="tableHeaderColor"
                  ref="multipleTable"
                  style="width: 100%" 
                  :row-class-name="tableRowClassName"
                  border
                  size="small"
                  @selection-change="selectAddProductChange">
                  <el-table-column
                      type="selection"
                      width="55">
                  </el-table-column>
                  <el-table-column prop="id" label="ID" sortable  align="center"></el-table-column>
                  <el-table-column prop="code" label="商品编码" sortable  align="center"></el-table-column>
                  <el-table-column prop="chineseName" label="商品名称" align="center"></el-table-column>
                  <el-table-column prop="name" label="商品品牌" align="center"></el-table-column>
                  <el-table-column prop="fullNamePath" label="商品类目" align="center"></el-table-column>
                  <el-table-column prop="salePriceWithTax" label="零售价（元）" align="center"></el-table-column>
              </el-table>
          </div>
          <div v-if="productTemplateList.length > 0" style="position:absolute;left:20px;bottom:18px;">
              <el-pagination
                  @size-change="producthandleSizeChange"
                  @current-change="producthandleCurrentChange"
                  :current-page="productForm.start"
                  :page-sizes="[10]"
                  :page-size="productForm.limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="productListTotal">
              </el-pagination>
          </div>
          <div slot="footer" class="product-dialog-footer">
            <el-button @click.native="productListTemplateVisible=false" size="mini">取消</el-button>
            <el-button type="primary" @click="saveModuleConf" size="mini">确定</el-button>
          </div>
        </el-dialog>
      </div>
      
    <!-- </el-dialog> -->
</template>

<script>
export default {
    name: "moduleTwoLine",
    props:{
      moduleId:{
          type: String
      },
      moduleNameDataForm:{
        type:Object,
        default:()=>{
          return {}
        }
      },
    },
    data(){
        return{  
          imgUpload: this.utils.uploadImgUrl,          // 上传图片地址
          formLabelWidth:'60',
          dataForm:{
            imgUrl:''
          },  
          size: "small",                              // form表单尺寸
          productListloading: false,           //弹窗商品表格加载状态
          productListData:[],                 //商品列表
          productTemplateList:[],             //弹窗商品列表
          productForm:{},                     //商品搜索条件
          productSelectList:[],               //选中的商品
          productListTotal:0,                 //弹窗商品总条数  
          productListTemplateVisible:false,    //添加商品弹窗
          singlList:[]
        }
    },
    methods:{
      // 图片回显  handlePictureCardPreview
       handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },


      // 删除已上传的图片  handleRemove
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
        


      // 上传成功后回调
      singlSuccess(data){
        
      },
      close(){
        // this.MoreMapDialogVisible=false
        this.$emit('TitleMapDialogVisibleFun')
      },
        /**
         * 名称配置保存
         */
        saveModuleNameConf(){
            // this.$set(this.dataForm,"jumpLink","http://"+this.dataForm.jumpLink);
            this.utils.request.cmsPageModuleAddModuleData({templateDataType:0,moduleId:this.moduleId,variablesObject:this.dataForm},res=>{
                if(res.code == "0000"){
                this.$emit('TitleMapDialogVisibleFun')
                 this.$emit('getIndex');
                this.$message({"message":"保存成功",type:"success"});
                }else{
                this.$message({"message":res.msg,type:"error"});
                }
            })
        },
        /**
         * dataForm赋值
         */
        moduleNameDataFormToJSON(moduleNameDataForm){
            this.dataForm = moduleNameDataForm;
        },
        close(){
            this.$emit('productListTemplateVisibleFun')
        },
        queryPageProductManagement(){
            let that = this;
            this.productListloading = true;
            // debugger;
            this.utils.request.queryPageProductManagement(this.productForm,res=>{
                console.log(res);
                that.productListloading = false;
                if(res.code == '0000'){
                    that.productTemplateList = res.data.rows;
                    that.productListTotal = res.data.total;
                }
            })
        },
        /**
         * 换页刷新
         */
        producthandleCurrentChange(val){
            console.log(val);
            this.$set(this.productForm,"start",val);
            //查询商品
            this.queryPageProductManagement();
        },
        /**
         * 商品换页刷新
         */
        producthandleSizeChange(val){
            console.log(val);
        },
        /**
         * 商品选中
         */
        selectAddProductChange(val){
            this.productSelectList = val;
        },
        //table的双色条纹
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        //修改table header的背景色
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color:rgb(250,250,250);'
            }
        },
        /**
         * 保存配置
         */
        saveModuleConf(){
            if(this.productSelectList.length < 1){
                this.$message({message:"必须选中一条商品",type:"error"})
                return false;
            }
            let productIds = this.productSelectList.map(item=>item.id);
            console.log(productIds)
            this.utils.request.cmsPageModuleAddModuleData({templateDataType:1,moduleId:this.moduleId,productIds:productIds},res=>{
                if(res.code == "0000"){
                this.productListTemplateVisible = false;
                this.getModuleProductList({moduleId:this.moduleId});
                this.productSelectList = [];
                this.$message({"message":"保存成功",type:"success"});
                }else{
                this.$message({"message":res.msg,type:"error"});
                }
            })
        },
        /**
         * 添加商品弹窗显示
         */
        showProductList(){
          this.productListTemplateVisible = true;
        },
        /**
         * 查询模板商品
         */
        getModuleProductList(item){
          debugger
          this.utils.request.getIndexList({moduleId:item.moduleId},res=>{
            console.log(res);
            if(res.code == '0000'){
              this.productListData = res.data;
            }
          })
        },
    },
    mounted(){
        this.queryPageProductManagement();
    }
}
</script>

<style>

</style>